<!--
 * @Author: your name
 * @Date: 2020-12-15 15:49:06
 * @LastEditTime: 2020-12-15 17:16:09
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \Web\JQuery基础\Ch7JQuery的Ajax操作\05$.getJSON方法加载JSON文件.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../JQ/jquery-3.5.1.min.js"></script>
    <script>
        $(document).ready(function(){
            $.getJSON("05test.json",function(data){
                var htmlStr="";
                $.each(data,function(index,info){
                    htmlStr+="姓名"+info['name']+"<br>";
                    htmlStr+="性别"+info['sex']+"<br>";
                    htmlStr+="邮箱"+info['email']+"<br>";
                })
                $("#json").html(htmlStr);
            })
        })
    </script>
</head>
<body>
    <div id="json"></div>
</body>
</html>

<!--
     $("#btn").click(function(){
        $.getJSON("JSON文件",回调函数)
    })
    getJSON()方法还具备回调函数，在JSON文件成功载入后执行
-->